<template>
	<template v-if="show">
		<view class="" style="height: 250rpx;">
			
		</view>
		<view class="login-container shadow fr-ac-jsb">
			<view class="">
				登录后即可享受更多功能
			</view>
			<view @click="goLogin" class="login-btn">
				去登录
			</view>
		</view>
	</template>
	
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		watch
	} from 'vue'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useUserStore
	} from '@/store/user'
	const appStore = useAppStore()
	const userStore = useUserStore()
	const show = ref(false)
	onMounted(()=>{
		setTimeout(()=>{
			let pages = getCurrentPages() // 获取栈实例
			let fullPath = pages[pages.length - 1].$page.fullPath
			if(fullPath.includes('/pages/login')){
				return
			}
			if(fullPath.includes('/pages/webview')){
				return
			}
			if(!userStore.isLogin){
				show.value = true
			}
		},14)
	})
	
	const goLogin = ()=>{
		if(!appStore.redirect){
			const pages = getCurrentPages() // 获取栈实例
			appStore.redirect = pages[pages.length - 1].$page.fullPath
		}
		uni.$u.route('/pages/login/index')
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.login-container{
		height: 150rpx;
		position: fixed;
		bottom: 200rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		padding: 40rpx 30rpx;
		background-color: #fff ;
		border-radius: 16rpx;
		opacity: 0.95;
		z-index: 999;
		backdrop-filter: blur(20px);
	}
	
	@media screen and (min-width:960px){
		.login-container{
			left: 50%;
			width: calc(750rpx - 60rpx);
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width:960px){
		.login-container{
			left: 0;
			width: calc(100vw - 60rpx);
			margin: 0 30rpx;
		}
	}
	
	.login-btn{
		background-color: var(--color);
		color: #fff;
		border-radius: 12rpx;
		padding: 12rpx 30rpx;
		text-align: center;
		animation: myBreath 1.5s ease-in infinite;
	}
	
	@keyframes myBreath {
		0% {
			filter: brightness(1); /* 提升亮度 */
			transform: scale(0.88);
		}

		50% {
			transform: scale(100%);
			filter: brightness(1.2); /* 提升亮度 */
		}

		100% {
			transform: scale(0.88);
			filter: brightness(1); /* 提升亮度 */
		}
	}
	
</style>